<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
    <style>
        .fs20{
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    const list = [
        { id: 1, name: 'jack', content: 'rose, you jump i jump', time: '03:21' },
        { id: 2, name: 'rose', content: 'jack, you see you, one day day', time: '03:22' },
        { id: 3, name: 'tom', content: 'jack,。。。。。', time: '03:23' }
    ]
    function click1(time){
        alert(time);
    }
    const vdom = list.length ? (
        <ul>
            {list.map(item=>(
                <li key={item.id}>
                    <a href='http://baidu.com' onClick={(e)=>{
                        e.preventDefault();
                    }}>
                        <h3 style={{fontSize:'25px'}}>{item.name}</h3>
                        <p className='fs20' onClick={()=>click1(item.time)}>{item.content}</p>
                    </a>
                </li>
            ))}
        </ul>
    ) : <h1>暂无评论数据</h1>;

    root.render((
        <div>
            {vdom}
        </div>
    ))
</script>

</html>